<template>
  <div class="user">
    <!-- 再封装一层 -->
    <PageSearch
      :search-form-config="searchFormConfig"
      @reset-btn-click="handleResetClick"
      @query-btn-click="handleQueryClick"
    ></PageSearch>
    <PageContent
      ref="pageContentRef"
      :content-table-config="contentTableConfig"
      :prop-list="propList"
      page-name="users"
      @edit-btn-click="handleEditData"
      @new-btn-click="handleNewData"
    >
      <template #status="scope">
        <!-- 作用域插槽传递的值 按钮相关-->
        <el-button
          plain
          :type="scope.row.enable ? 'success' : 'danger'"
          size="small"
        >
          {{ scope.row.enable ? '启用' : '禁用' }}
        </el-button>
      </template>
    </PageContent>
    <PageModal
      ref="pageModalRef"
      page-name="users"
      :modal-info="modalInfo"
      :modal-config="modalConfig"
    ></PageModal>
  </div>
</template>

<script setup lang="ts">
// vue相关的库 -> 组件 -> 类型 -> 方法
import { useInitialStore } from '@/store'

import PageSearch from '@/components/PageSearch/PageSearch.vue'
import PageContent from '@/components/PageContent/PageContent.vue'
import PageModal from '@/components/PageModal/PageModal.vue'

import { searchFormConfig } from './config/search.config'
import { contentTableConfig, propList } from './config/content.config'
import { modalConfig } from './config/modal.config'

import { usePageSearch } from '@/hooks/usePageSearch'
import { usePageModal } from '@/hooks/usePageModal'

// 重置搜索 以hooks的形式使用 数组解构
const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()

// 新建和编辑的回调函数 处理是否隐藏输入框
const newCallback = () => {
  // 新建的回调函数 新建的时候密码框是不需要隐藏的
  const passwordItem = modalConfig.formItems.find(
    (item) => item.field === 'password'
  )
  // 非空断言
  passwordItem!.isHidden = false
}
const editCallback = () => {
  // 编辑的回调函数 编辑的时候密码框是需要隐藏的
  const passwordItem = modalConfig.formItems.find(
    (item) => item.field === 'password'
  )
  passwordItem!.isHidden = true
}

// 动态添加部门和角色列表 加入到 -> options
const departmentItem = modalConfig.formItems.find(
  (item) => item.field === 'departmentId'
)
// 这里是对返回值做一下加工，从初始化获取信息的函数里面取得 “全部部门” 的信息
// 因为这里是和 search 里面的数据类型一样的
// 这里why老师的用来computed进行一个计算最新数据改变，但是我这里没用也实现了效果，我也不知道为什么
departmentItem!.options = useInitialStore().entireDepartment.map((item) => {
  return { title: item.name, value: item.id }
})
const roleItem = modalConfig.formItems.find((item) => item.field === 'roleId') // 同上
roleItem!.options = useInitialStore().entireRole.map((item) => {
  return { title: item.name, value: item.id }
})

// pageModal 弹出框的处理函数
const [modalInfo, pageModalRef, handleEditData, handleNewData] = usePageModal(
  newCallback,
  editCallback
)
</script>
<style scoped lang="less"></style>
